<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图</title>
    <script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=Nj2UrnWPzNF4a3ZGIXhlWRz2AcGrDWE8"></script>
</head>
<body>
        <button onclick="map.setMapType(BMAP_EARTH_MAP)">卫星</button> 
        <button  onclick="map.setMapType(BMAP_NORMAL_MAP)">标准</button>
        <button  onclick="map.setMapType(BMAP_SATELLITE_MAP)">北斗</button>
        <div id="app" style="width:1200px;height:800px">
        </div>
        <script>
            // 初始化地图
            var map = new BMapGL.Map("app");
            // 创建一个点
            var point = new BMapGL.Point(116.404, 39.915);
            // 设置地图的中心点与缩放级别
            map.centerAndZoom(point, 14); 
            // 鼠标缩放
            map.enableScrollWheelZoom();
            var marker = new BMapGL.Marker(point);
            map.addOverlay(marker);
            // 信息窗口的基本选项
            var opts = {
                width: 250,     // 信息窗口宽度
                height: 200,    // 信息窗口高度
                title: "中国前端培养基地"  // 信息窗口标题
            }
            // 创建一个信息窗口，设置内容（支持html）和选项
            var infoWindow = new BMapGL.InfoWindow("<p>中国最辉煌的一带前端</p><img src='https://img-blog.csdnimg.cn/img_convert/c7b14196d02f1eda211322141336013f.png' width='160'>", opts);  // 创建信息窗口对象
            // map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口
            // 单击点能够打开 信息窗口，位置是地图中心
            marker.addEventListener("click",()=>{
                map.openInfoWindow(infoWindow, map.getCenter());  
            })

            // var content = '余同学家的房子';
            // var label = new BMapGL.Label(content, {       // 创建文本标注
            //     position: point,
            //     offset: new BMapGL.Size(10, 20)
            // })  
            // map.addOverlay(label);                        // 将标注添加到地图中
            // label.setStyle({                              // 设置label的样式
            //     color: '#000',
            //     fontSize: '30px',
            //     border: '2px solid #1E90FF'
            // })
                    
         
        </script>
</body>
</html>